<template>
    <div class="per_page">
      <div id="perChart"></div>
      <div class="item_txt">
          <p>评分满分为100</p>
      </div>
    </div>
  </template>
  <script>
  import * as echarts from 'echarts'
  
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      percentage: {
        type: Number,
        default: 0
      },
      IndexDesc: {
        type: String,
        default: ''
      }
    },
    created() {
      this.$nextTick(() => {
        this.perBtn()
      })
    },
    methods: {
      perBtn() {
        let myChart = echarts.init(document.getElementById('perChart'))
        let option = {
          series: [
            {
              type: 'gauge',
              radius: '80%',
              progress: {
                show: true,
                width: 16
              },
              axisLine: {
                lineStyle: {
                  width: 16
                }
              },
              splitLine: {
                length: 10,
                lineStyle: {
                  width: 2,
                  color: '#ffffff'
                }
              },
              itemStyle: {
                  color: '#00EE67'
              },
              axisLabel: {
                distance: 20, // 文字离表盘的距离
                color: '#ffffff',
                fontSize: 14
              },
              detail: {
                valueAnimation: true,
                fontSize: 24,
                color: '#ffffff'
              },
              pointer: {
                length: '45%' // 指针长度，按照半圆半径的百分比
              },
              title: {
                offsetCenter: [0, '100%'],
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: 12,
                  color: '#ffffff'
                },
                
              },
              data: [
                {
                  value: this.percentage,
                  name: this.title
                }
              ]
            }
          ]
        }
        myChart.setOption(option)
        // 让图表跟随屏幕自动的去适应
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
  </script>
  <style scoped>
  #perChart {
    width: 300px;
    height: 300px;
  }
  .per_page {
    width: 100%;
    height: 300px; /* 根据需要调整大小 */
    display: flex;
    flex-direction: column;
    align-items: center;
    
  }
  .item_txt {
    margin-top: -10px;
    text-align: center;
  }
  .item_txt p:first-child {
    color: #ffffff;
    font-size: 14px;
    margin: 0;
  }
  .item_txt p:nth-child(2) {
    color: #ffffff;
    font-size: 12px;
  }
  </style>